import React from 'react';
import { Card } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import Search from './components/Search';
import { Pie } from '@ant-design/charts';
import Progress from './components/Progress';
import { classification } from '@/services/Collection';
import Export from './components/Export';
import config from './config';

class Classification extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      params: {
        type: 1
      },
      pieConfig: { ...config },
      progressList: []
    }
  }

  /* 监听查询事件 */
  onSearch = (data) => {
    const params = this.state.params;
    this.setState({ params: { ...params, ...data } });
    this.getClassification();
  }

  /* 刷新事件 */
  onReload = () => {
    const type = this.state.params.type;
    this.setState({ params: { type } });
    this.getClassification();
  }

  /* 获取radio变化 */
  onRadioChange = (type) => {
    const params = this.state.params;
    params.type = type;
    this.setState({params});
    this.getClassification();
  }

  /* 获取展示数据 */
  getClassification = async () => {
    try {
      const params = this.state.params;
      const type = params.type;
      const pieConfig = this.state.pieConfig;
      const res = await classification(params);
      if (type === 1) {
        pieConfig.data = res;
        this.setState({ pieConfig });
      } else {
        this.setState({ progressList: res });
      }
    } catch (e) {
      console.error(e);
    }
  }

  componentDidMount() {
    this.getClassification()
  }

  render() {
    const { onSearch, onReload, onRadioChange} = this;
    const pieConfig = this.state.pieConfig;
    const progressList = this.state.progressList;
    const params = this.state.params;
    return (
      <PageContainer>
        <Card
          title='分类统计'
          bodyStyle={{ paddingBottom: 0, paddingTop: 30 }}
          bordered={false}>
          <Search search={onSearch} reset={onReload} />
          <Export change={onRadioChange} query={params}></Export>
          {params.type === 1 ? <Pie style={{ paddingTop: 30, paddingBottom: 30 }} {...pieConfig}></Pie> : <Progress list={progressList}></Progress>}
        </Card>
      </PageContainer>
    );
  }
}

export default Classification;
